import React from 'react';
import { connect } from 'dva';
import QueueAnim from 'rc-queue-anim';
import PropTypes from 'prop-types';
import { routerRedux } from 'dva/router';
import { Row, Col, Slider, Card, Icon, Spin, Badge, Button, Modal } from 'antd';
import { CardNum, FunnelPlot, LineChart, Mytable, NewCard, MyEchart, RadarChart, Popover_goods, LineCardSearch } from '../../components';
import styles from './dashboard.less';
import SearchTime from './SearchTime';
import ModalShow from './ModalShow';

class Dashboard extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      timer: null,
      visible: false,
      searchPUS: null,
      title: null,
      keys: null,
      msgs: [],
      colors: 1,
    };
  }
  showPvModal = (title, keys, msgs, colors) => {
    this.setState({
      title,
      keys,
      msgs,
      visible: true,
      colors,
    });
  }
  handleOk = () => {
    this.setState({
      visible: false,
    });
  }
  handleCancel = () => {
    this.setState({
      searchPUS: null,
      visible: false,
    });
  }

  componentDidMount() {
    this.setState({
      timer: setInterval(() => {
        this.props.dispatch({ type: 'dashboard/fetch' });
        this.props.dispatch({ type: 'dashboard/searchOrders' });
      }, 30000),
    });
  }

  componentWillUnmount() {
    if (this.state.timer != null) {
      clearInterval(this.state.timer);
    }
  }

  componentWillReceiveProps(data) {
    const { searchPUS } = data;
    this.setState({
      searchPUS,
    });
  }
  render() {
    const { _FunnelPlot, LineChart_pvuv, LineChartMoney, uv, pv, total_money, total_count, sku, mytabel_map, tabel_map_month, order_log, order_log_count, goods_msg, new_users, LineChartOrder	 } = this.props;
    const bool = false;
    const { msgs, searchPUS, colors } = this.state;
    return (
      <div className={styles.user}>


        <div className={styles.headerBack} >

          <Row gutter={25} type="flex" justify="space-around" align="middle">
            <Col span={4}>
              <div className={styles.card} >
                <CardNum msg={total_money} icon={'pay-circle-o'} title={'成交额'} bg={'#3B5998'} />
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.card}>
                <CardNum msg={sku} icon={'shopping-cart'} title={'SKU'} bg={'#F8CB00'} />
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.card}>
                <CardNum msg={uv} icon={'message'} title={'UV'} bg={'#63C2DE'} />
              </div >
            </Col>
            <Col span={4}>
              <div className={styles.card} >
                <CardNum msg={pv} icon={'usergroup-add'} title={'浏览量'} bg={'#F86C6B'} />
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.card} >
                <CardNum msg={total_count} icon={'schedule'} title={'成交数'} bg={'#888888'} />
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.card}>
                <CardNum msg={new_users} icon={'star-o'} title={'新用户'} bg={'orange'} />
              </div>
            </Col>
          </Row>


        </div>

        <div className={styles.boxBack}>

          <Row gutter={10}>
            <Col xl={{ span: 5 }} lg={{ span: 4 }}>
              <NewCard msg={order_log} my_msg={order_log_count} />
            </Col>
            {/* <Mytable loading={bool} style={{ flex: 1, background: '#fff', }} columns={tabel_map_day} dataSource={mytabel_map_day} />*/}
            {/* <Mytable loading={bool} style={{ flex: 3, background: '#fff', }} columns={tabel_alexa} dataSource={mytabel_alexa} />*/}
            <Col xl={{ span: 14 }} lg={{ span: 16 }}>
              <Spin spinning={bool}><a style={{ flex: 3 }}> <Popover_goods msg={goods_msg} /></a></Spin>
            </Col>
            <Col xl={{ span: 5 }} lg={{ span: 4 }}>
              <Mytable loading={bool} style={{ flex: 1, background: '#fff' }} columns={tabel_map_month} dataSource={mytabel_map} rowKey={record => record.region} />
            </Col>
          </Row>

        </div>

        <div className={styles.footerBack}>
          <div >
            <Row gutter={10}>
              <Col xl={{ span: 6 }} lg={{ span: 6 }}>
                <Spin spinning={bool}>
                  <a onClick={() => this.showPvModal('PUS数据', ['xm_pv', 'xm_uv', 'xm_sku'], LineChart_pvuv, 1)}><LineChart
                    msg={LineChart_pvuv}
                    stys={{ width: 500, height: 400 }}
                    size={1}
                    colors={1}
                  /></a>

                </Spin>
              </Col>
              <Col xl={{ span: 6 }} lg={{ span: 6 }}>
                <Spin spinning={bool}>
                  <a onClick={() => this.showPvModal('每日销售金额查询', ['xm_money', 'gd_money'], LineChartMoney, 4)}><LineChart
                    msg={LineChartMoney}
                    stys={{ width: 500, height: 400 }}
                    size={1}
                    colors={4}
                  /> </a>

                </Spin>
              </Col>
              <Col xl={{ span: 6 }} lg={{ span: 6 }}>
                <Spin spinning={bool}>
                  <a onClick={() => this.showPvModal('每日订单数查询', ['xm_orders', 'gd_orders'], LineChartOrder, 4)}><LineChart
                    msg={LineChartOrder}
                    stys={{ width: 500, height: 400 }}
                    size={1}
                    colors={4}
                  /> </a>

                </Spin>
              </Col>
              <Col xl={{ span: 6 }} lg={{ span: 6 }}>
                <Spin spinning={bool}><div><MyEchart msg={_FunnelPlot} /></div></Spin>
              </Col>
            </Row>
          </div>
        </div>
        <Modal
          width={1000}
          visible={this.state.visible}
          title={this.state.title}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={null}
        >
          <div>
            <SearchTime dispatch={this.props.dispatch} keys={this.state.keys} />
            <LineChart
              msg={searchPUS || msgs}
              stys={{ width: 800, height: 400 }}
              size={2}
              colors={colors}
            />
          </div>
        </Modal>
      </div>


    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.dashboard,

  };
}


Dashboard.propTypes = {
  dashboard: PropTypes.object,
};

export default connect(mapStateToProps)(Dashboard);
